<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="linzhifeng@baidu.com">

    <script src="asset/js/esl/esl.js"></script>

    <!-- Le styles -->
    <link href="asset/css/bootstrap.css" rel="stylesheet">
    <link href="asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="asset/css/echartsHome.css" rel="stylesheet">

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="asset/ico/favicon.png">
  </head>

  <body>

    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="../index.html">ECharts</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>
              <ul class="nav">
                <li><a href="../index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="active"><a href="example.html" class="active">Example</a></li>
                <li><a href="doc.html" >API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe/echarts/archive/1.1.0.zip">ZIP (1.1.0)</a></li>
                    <li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>
                    <li><a href="http://tangram.baidu.com/" target="_blank">Tangram</a></li>
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container">
        <h1>折线图</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/line1.html"><img src="asset/img/example/line1.png" ></a>
                  <p>标准折线图。</p>
                  <p><a class="btn" href="example/line1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/line2.html"><img src="asset/img/example/line2.png"></a>
                  <p>堆积折线图，支持任意系列堆积。</p>
                  <p><a class="btn" href="example/line2.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/line5.html"><img src="asset/img/example/line5.png"></a>
                  <p>标准折线图，横纵坐标轴互换。</p>
                  <p><a class="btn" href="example/line5.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/line3.html"><img src="asset/img/example/line3.png"></a>
                  <p>标准面积图。</p>
                  <p><a class="btn" href="example/line3.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/line4.html"><img src="asset/img/example/line4.png"></a>
                  <p>堆积面积图，支持任意系列堆积。</p>
                  <p><a class="btn" href="example/line4.html">View details &raquo;</a></p>
                </div><!--/span-->

            </div>
        </div>
        <hr>
        <h1>柱状图</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/bar1.html"><img src="asset/img/example/bar1.png"></a>
                  <p>标准柱状图。</p>
                  <p><a class="btn" href="example/bar1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                   <a href="example/bar2.html"><img src="asset/img/example/bar2.png"></a>
                  <p>堆积柱状图，支持任意系列堆积。</p>
                  <p><a class="btn" href="example/bar2.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/bar3.html"><img src="asset/img/example/bar3.png"></a>
                  <p>标准条状图。</p>
                  <p><a class="btn" href="example/bar3.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/bar4.html"><img src="asset/img/example/bar4.png"></a>
                  <p>堆积条状图，支持任意系列堆积。</p>
                  <p><a class="btn" href="example/bar4.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/bar5.html"><img src="asset/img/example/bar5.png"></a>
                  <p>标准条状图，正负值混合。</p>
                  <p><a class="btn" href="example/bar5.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <hr>
        <h1>散点图</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/scatter1.html"><img src="asset/img/example/scatter1.png"></a>
                  <p>标准散点图。</p>
                  <p><a class="btn" href="example/scatter1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                   <a href="example/scatter2.html"><img src="asset/img/example/scatter2.png"></a>
                  <p>气泡图</p>
                  <p><a class="btn" href="example/scatter2.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                   <a href="example/scatter3.html"><img src="asset/img/example/scatter3.png"></a>
                  <p>大规模散点图（IE8-不支持）</p>
                  <p><a class="btn" href="example/scatter3.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <hr>
        <h1>K线图</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/k1.html"><img src="asset/img/example/k1.png"></a>
                  <p>标准K线图。</p>
                  <p><a class="btn" href="example/k1.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <hr>
        <h1>饼图</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/pie1.html"><img src="asset/img/example/pie1.png"></a>
                  <p>标准饼图。</p>
                  <p><a class="btn" href="example/pie1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/pie2.html"><img src="asset/img/example/pie2.png"></a>
                  <p>标准环形图。</p>
                  <p><a class="btn" href="example/pie2.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/pie3.html"><img src="asset/img/example/pie3.png"></a>
                  <p>嵌套饼图。</p>
                  <p><a class="btn" href="example/pie3.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <hr>
        <h1>地图</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/map1.html"><img src="asset/img/example/map1.png"></a>
                  <p>标准地图。</p>
                  <p><a class="btn" href="example/map1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/map2.html"><img src="asset/img/example/map2.png"></a>
                  <p>地域选择器。</p>
                  <p><a class="btn" href="example/map2.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <hr>
        <h1>力导向布局图</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/force1.html"><img src="asset/img/example/force1.png"></a>
                  <p>简单关系网络。</p>
                  <p><a class="btn" href="example/force1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/webkit-dep.html"><img src="asset/img/example/webkit-dep.png"></a>
                  <p>Webkit内核依赖。</p>
                  <p><a class="btn" href="example/webkit-dep.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <hr>
        <h1>混搭</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/mix1.html"><img src="asset/img/example/mix1.png"></a>
                  <p>折线图与柱状图混搭，双数值轴。</p>
                  <p><a class="btn" href="example/mix1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/mix2.html"><img src="asset/img/example/mix2.png"></a>
                  <p>柱状图与饼图混搭。</p>
                  <p><a class="btn" href="example/mix2.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/mix3.html"><img src="asset/img/example/mix3.png"></a>
                  <p>地图与饼图混搭，地图同时作为地域选择器。</p>
                  <p><a class="btn" href="example/mix3.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/mix4.html"><img src="asset/img/example/mix4.png"></a>
                  <p>折线图与散点图混合（使用时需要注意同步数值轴与类目轴坐标）</p>
                  <p><a class="btn" href="example/mix4.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/lasagna.html"><img src="asset/img/example/lasagna.png"></a>
                  <p>多层嵌套环形图。</p>
                  <p><a class="btn" href="example/lasagna.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <hr>
        <h1>其他</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/dataZoom1.html"><img src="asset/img/example/datazoom1.png"></a>
                  <p>数据区域缩放</p>
                  <p><a class="btn" href="example/dataZoom1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/dataRange1.html"><img src="asset/img/example/dataRange1.png"></a>
                  <p>值域漫游</p>
                  <p><a class="btn" href="example/dataRange1.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/loading.html"><img src="asset/img/example/loading.png"></a>
                  <p>加载中（Loading）</p>
                  <p><a class="btn" href="example/loading.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <hr>
        <h1>个性化</h1>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/line.html"><img src="asset/img/example/line.png"></a>
                  <p>折线图：个性化填充、线条、拐点样式等~</p>
                  <p><a class="btn" href="example/line.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/bar.html"><img src="asset/img/example/bar.png"></a>
                  <p>柱状图：个性化柱形宽度，填充、高亮样式等~</p>
                  <p><a class="btn" href="example/bar.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/pie.html"><img src="asset/img/example/pie.png"></a>
                  <p>饼图：个性化填充、标签文本、视觉引导线样式等~</p>
                  <p><a class="btn" href="example/pie.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/scatter.html"><img src="asset/img/example/scatter.png"></a>
                  <p>散点图：个性化图形样式，大小等~</p>
                  <p><a class="btn" href="example/scatter.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/k.html"><img src="asset/img/example/k.png"></a>
                  <p>K线图：个性化柱形阴阳图形样式等~</p>
                  <p><a class="btn" href="example/k.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/map.html"><img src="asset/img/example/map.png"></a>
                  <p>地图：个性化填充、标签文本、线条样式等~</p>
                  <p><a class="btn" href="example/map.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/axis.html"><img src="asset/img/example/axis.png"></a>
                  <p>坐标系：个性化标签文字、间隔线、间隔区域样式等~</p>
                  <p><a class="btn" href="example/axis.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/dataZoom.html"><img src="asset/img/example/datazoom.png"></a>
                  <p>数据区域缩放：个性化数据阴影、背景、拖拽手柄样式等~</p>
                  <p><a class="btn" href="example/dataZoom.html">View details &raquo;</a></p>
                </div><!--/span-->
                <div class="span4">
                  <a href="example/tooltip.html"><img src="asset/img/example/tooltip.png"></a>
                  <p>提示框：个性化文字样式、边框、背景、格式器等~</p>
                  <p><a class="btn" href="example/tooltip.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="span4">
                  <a href="example/dataRange.html"><img src="asset/img/doc/dataRange.png"></a>
                  <p>值域控件：个性化布局，填充样式样式等~</p>
                  <p><a class="btn" href="example/dataRange.html">View details &raquo;</a></p>
                </div><!--/span-->
            </div>
        </div>
      <hr>
      <footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="changelog.html" target="_blank">Changelog</a></p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="asset/js/jquery.js"></script>
    <script src="asset/js/bootstrap-transition.js"></script>
    <script src="asset/js/bootstrap-alert.js"></script>
    <script src="asset/js/bootstrap-modal.js"></script>
    <script src="asset/js/bootstrap-dropdown.js"></script>
    <script src="asset/js/bootstrap-scrollspy.js"></script>
    <script src="asset/js/bootstrap-tab.js"></script>
    <script src="asset/js/bootstrap-tooltip.js"></script>
    <script src="asset/js/bootstrap-popover.js"></script>
    <script src="asset/js/bootstrap-button.js"></script>
    <script src="asset/js/bootstrap-collapse.js"></script>
    <script src="asset/js/bootstrap-carousel.js"></script>
    <script src="asset/js/bootstrap-typeahead.js"></script>

  </body>
</html>
